<template>
  <view class="container">
    <view class="container_close" @click="close">
      <image src="/static/image/close_icon.png" mode="widthFix" />
    </view>
    <view class="container_pic">
      <image :src="item.mainImage ? item.mainImage : image" mode="widthFix" />
    </view>
    <view class="container_tip">
      <image src="/static/image/item_tip.png" mode="widthFix" />
    </view>
    <view class="container_info">
      <itemPrice :price="item.taxPrice"></itemPrice>
      <view class="container_info_des">{{ item.goodsName }}</view>
    </view>
    <scroll-view scroll-y="true" style="max-height: 670rpx">
      <view class="container_detail">
        <block v-if="item.detailImage">
          <view v-for="(subItem, subIndex) in item.detailImage.split(',')" :key="subIndex"><image :src="subItem ? subItem : image" mode="widthFix" /></view>
        </block>

        <view>{{ item.describes ? item.describes : '' }}</view>
      </view>
    </scroll-view>
    <view class="container_bottom">
      <view class="container_bottom_header">
        <itemPrice :price="taxAmount"></itemPrice>
        <cartNumAddSub :item="tempItem" :index="index" @handleOperateCount="handleOperateCount"></cartNumAddSub>
      </view>
      <view class="container_bottom_footer">
        <button @click="addCart">加入购物车</button>
      </view>
    </view>
  </view>
</template>

<script>
import { basGoodsListForAdd, giftPromotionDetail, paperGoodsWithEmptyBoxGoodsList } from '../service/api/shopping'

import { debounce, setImage } from '../service/auth'
import itemPrice from '@/components/itemPrice'
import cartNumAddSub from './cartNumAddSub.vue'
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
  name: 'selectGoods',
  components: { itemPrice, cartNumAddSub },
  props: {
    item: {
      type: Object,
      default: {},
    },
    index: {
      type: Number,
      default: 0,
    },

    customerId: {
      type: String,
      default: '',
    },
  },
  watch: {
    item: {
      handler() {
        this.tempItem = { ...this.item, goodsCount: this.item.goodsCount || 1 }
        console.log('tempItem', this.tempItem)
      },
      deep: true,
    },
  },
  created() {},

  data() {
    return {
      giveCount: 0,
      timeOut: '',
      commonGoodsList: [],
      oldCommonName: '啦啦啦',
      image: 'https://www.zjjqf.cn/file/static/undefined.png',
      tempGoodsCount: 0,
      tempItem: {},
    }
  },
  computed: {
    taxAmount() {
      return Number(this.tempItem.taxPrice * this.tempItem.goodsCount).toFixed(2)
    },
    ...mapState({
      cartItems: state => state.cart.cartItems,
    }),
    ...mapGetters(['totalPrice', 'totalGoodsCount']),
  },

  methods: {
    addCart() {
      this.close()
      // this.tempItem.goodsCount = 0
      this.$emit('selectGoods', this.tempItem, this.tempItem.goodsCount)
    },

    close() {
      this.$emit('closeDialog')
    },
    //加个防抖
    debounce(fn, time, ...arg) {
      this.timeOut && clearTimeout(this.timeOut)
      this.timeOut = setTimeout(() => {
        this.timeOut = null
        this.giveCount = fn(...arg)
      }, time)
    },
    handleOperateCount(params) {
      //修改数量不加入购物车
      console.log('params', params)
      const { item, index, type } = params
      if (type === 'add') {
        this.tempItem.goodsCount += 1
      } else if (type === 'del') {
        if (item.goodsCount >= 2) {
          this.tempItem.goodsCount -= 1
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #f5f6fa;
  border-top-left-radius: 10rpx;
  border-top-right-radius: 10rpx;

  &_close {
    position: absolute;
    right: 20rpx;
    width: 40rpx;
    top: 20rpx;
  }
  &_pic {
    width: 400rpx;
    margin: 0 auto;
    display: flex;
    align-items: center;
  }
  &_tip {
    background-color: #fed8d3;
    padding: 10rpx 0 10rpx 20rpx;
    border-top-left-radius: 10rpx;
    border-top-right-radius: 10rpx;
    image {
      width: 60%;
    }
  }
  &_info {
    background-color: white;
    border-top-left-radius: 10rpx;
    border-top-right-radius: 10rpx;
    padding: 20rpx;
    &_price {
      font-weight: 600;
      font-size: 32rpx;
      font-family: PingFang SC;

      color: red;
      &_label {
        font-size: 26rpx;
      }
    }
    &_des {
      font-weight: bold;
      font-size: 40rpx;
    }
  }
  &_detail {
    padding: 20rpx 20rpx 150rpx 20rpx;
  }
  &_bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20rpx;
    background-color: white;
    border-top: 1rpx solid #a9b4c8;
    box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.05);
    &_header {
      display: flex;
      justify-content: space-between;
    }
    &_footer {
      margin-top: 20rpx;
      button {
        height: 80rpx;
        line-height: 80rpx;
        font-size: 28rpx;
        color: white;
        background: linear-gradient(to left, #ff8f00, #ffb300);
      }
    }
  }
}
</style>
